<style>
    .chat{
        width: 98%;
        height: 480px;
        /*align-content: center;*/
        border: none;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 5px;
        margin: 5px 5px;
    }
    .title {
        margin: 0 0 1em 0;
        padding: 1em 0;
        border-bottom: 1px solid #ff3e00
    }
</style>

<script>
    import Message from './message.svelte'
    import {onMount} from "svelte";
    import { thisuser} from "../src/main";
    import messages from "../store.js";
    import { Skeleton } from '@svelteuidev/core';

    // import {messages} from "../src/main";

    // var messages=require('./src/main')
    // $:{
    //     console.log(`change ${messages}`)
    //     msgs=getmessages()
    // }

    onMount(
        async ()=>{
            fetch("/api/loadmsg",{
                method:'Get'
            }).then((res)=>{
                return  res.json()
            }).then((r)=>{
                // console.log(r)
                // console.log(messages)
                messages.update(curmsgs =>{
                    return r.msgs
                })
                // console.log($messages)
            })
        }
    )
</script>

<div class="chat">
<!--    <div>-->
<!--        <p >...</p>-->
<!--    </div>-->
    <div style="overflow-y: scroll;height: 100%;width: 100%">
        {#each $messages as {msg,from,to,at}}
            <div style="float: {from===thisuser? 'right':'left'}">
                <Message>
                    <span slot="msg">{msg}</span>
                </Message>
            </div>
            <div style="clear: both">
            </div>
        {:else}
            <!--             this block renders when photos.length === 0 -->
            <p>loading...</p>
        {/each}
<!--        <Skeleton height={50} circle mb="xl" override={{ marginBottom: '24px' }}   />-->
        <Skeleton style="margin-top: 20px" height={8} radius="xl"   />
        <Skeleton height={8} radius="xl" override={{ marginTop: '8px' }}   />
        <Skeleton height={8} width="70%" radius="xl" override={{ marginTop: '8px' }}   />
        <slot></slot>
    </div>
</div>
